<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018年深圳市龙岗区年度教师评选</title>
    <link rel="stylesheet" href="__CSS__/fullpage.min.css">
    <link rel="stylesheet" href="__CSS__/layer.css">
    <link rel="stylesheet" href="__CSS__/main.css">
    <script src="__JS__/flexible.js"></script>
    <script src="__JS__/jweixin-1.0.0.js"></script>
    <script>
        function autoPlayAudio() {
            //微信配置
            wx.config({$jssdk});
            wx.ready(function() {
                var globalAudio = document.getElementById("bgMusic");
                globalAudio.play();
                //分享到朋友圈
                wx.onMenuShareTimeline({
                    title: '{$title}', // 分享标题
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享给朋友
                wx.onMenuShareAppMessage({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享到QQ
                wx.onMenuShareQQ({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享到腾讯微博
                wx.onMenuShareWeibo({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享到QQ空间
                wx.onMenuShareQZone({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
        };
        autoPlayAudio();
        document.addEventListener("WeixinJSBridgeReady", function() {
            document.getElementById('bgMusic').load(); //load重新加载音频，实现苹果预加载
        }, false);
    </script>
    <style>
        #wraper .before {
            background-image: url(__IMG__/before/back.jpg);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        #wraper .before .scene {
            background-image: url(__IMG__/before/scene.png);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 10;
            opacity: 0;
        }

        #wraper .before .shin {
            background-image: url(__IMG__/before/shin.png);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 11;
            opacity: 0;
        }

        #wraper .before .tool {
            width: 100%;
            height: 100%;
            background-image: url(__IMG__/before/tool.png);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            position: absolute;
            z-index: 12;
            opacity: 0;
        }

        #wraper .before .text {
            display: none;
            position: absolute;
            z-index: 13;
            width: 2.22rem;
            height: 6.43rem;
            top: -100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        #wraper .before .arrowDown {
            opacity: 0;
            position: absolute;
            z-index: 15;
            width: 1.5rem;
            height: 1rem;
            bottom: 0.8rem;
            left: 50%;
            margin-left: -0.75rem;
        }

        #wraper .cover {
            background-image: url(__IMG__/first_scene/first.jpg);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        #wraper .cover #enter {
            background-image: url(__IMG__/first_scene/btn.png);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            position: absolute;
            width: 4.88rem;
            height: 1.58rem;
            bottom: 150%;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
            display: none;
        }

        #wraper .introduce {
            background-image: url(__IMG__/third_scene/introduce.jpg);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        #wraper .winner {
            background-image: url(__IMG__/fourth_scene/1.jpg);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        #wraper .after {
            background-image: url(__IMG__/after/back.jpg);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        #wraper .after .tool {
            width: 100%;
            height: 100%;
            background-image: url(__IMG__/before/tool.png);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            position: absolute;
            z-index: 12;
            opacity: 0;
        }

        #wraper .after .scene {
            background-image: url(__IMG__/after/scene.png);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            width: 95%;
            height: 50%;
            top: 36%;
            left: 0.2rem;
            position: absolute;
            z-index: 10;
            opacity: 0;
        }

        #wraper .after .text1 {
            position: absolute;
            z-index: 13;
            width: 8.7rem;
            height: 1.8rem;
            top: 14%;
            left: 50%;
            transform: translate(-50%, 0);
            opacity: 0;
        }

        #wraper .after .text2 {
            position: absolute;
            z-index: 13;
            width: 5.3rem;
            height: 0.35rem;
            top: 28%;
            right: 10%;
            opacity: 0;
        }

        #wraper .ending,
        #wraper .report {
            background-image: url(__IMG__/fifth_scene/fifth_bg.jpg);
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        #wraper .report .title {
            position: absolute;
            top: 16.5%;
            left: 50%;
            width: 7.86rem;
            height: 0.66rem;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        #wraper .report .content {
            position: absolute;
            top: 28%;
            left: 50%;
            width: 7.42rem;
            height: 9.26rem;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        #wraper .ending .conclude {
            position: absolute;
            top: 21%;
            left: 50%;
            width: 8.56rem;
            height: 1.09rem;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        #wraper .ending .code,
        #wraper .ending .text {
            display: none;
            position: absolute;
            top: -50%;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        #wraper .ending .code {
            width: 5.82rem;
            height: 5.82rem;
            /* animation: codedrop 2s ease-out 1s; */
            animation-fill-mode: forwards;
            /* animation: codedrop 2s ease-out 1s; */
        }

        #wraper .ending .text {
            width: 5.10rem;
            height: 1.10rem;
            margin-top: 6.1rem;
            /* animation: textup 4s ease-out 3s; */
            animation-fill-mode: forwards;
            /* animation: textup 4s ease-out 3s; */
        }

        #wraper .teachers div {
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
        }

        .t1 {
            background-image: url(__IMG__/fourth_scene/1.jpg)
        }

        .t2 {
            background-image: url(__IMG__/fourth_scene/2.jpg)
        }

        .t3 {
            background-image: url(__IMG__/fourth_scene/3.jpg)
        }

        .t4 {
            background-image: url(__IMG__/fourth_scene/4.jpg)
        }

        .t5 {
            background-image: url(__IMG__/fourth_scene/5.jpg)
        }

        .t6 {
            background-image: url(__IMG__/fourth_scene/6.jpg)
        }
    </style>
</head>

<body>

    <div id="loading">
        <img src="__IMG__/loading.gif">
    </div>

    <div class="bgMusic"></div>

    <div id="wraper">

        <!--  before 动画 -->
        <div data-anchor='before' class="section before">
            <div class="scene"></div>
            <div class="shin"></div>
            <div class="tool"></div>
            <img src="__IMG__/before/text.png" alt="" class="text showText">
            <img src="__IMG__/before/arrowDown.png" class="arrowDown">
        </div>

        <!-- 01 封面 -->
        <div data-anchor='cover' class="section cover">
            <span id="enter"></span>
        </div>

        <!-- 02 图片墙 -->
        <div data-anchor='photoWall' class="section photoWall">
            <div class="img">
                <img src="__IMG__/second_scene/pw1.jpg" alt="">
            </div>
            <div class="img">
                <img src="__IMG__/second_scene/pw2.jpg" alt="">
            </div>
            <div class="img">
                <img src="__IMG__/second_scene/pw3.jpg" alt="">
            </div>
            <div class="img">
                <img src="__IMG__/second_scene/pw4.jpg" alt="">
            </div>
            <div class="img">
                <img src="__IMG__/second_scene/pw5.jpg" alt="">
            </div>
            <div class="img">
                <img src="__IMG__/second_scene/pw6.jpg" alt="">
            </div>
        </div>

        <!-- 03 介绍 -->
        <div data-anchor='introduce' class="section introduce">

        </div>

        <!-- 04 获奖者 -->
        <div data-anchor='winner' class="section winner">

        </div>

        <!-- 05 教师 -->
        <div data-anchor='teachers' class="section teachers">
            <!-- <div class="slide t1">
                
            </div> -->
            <div class="slide t2">
                <div class="move floatMove">
                    <img src="__IMG__/fourth_scene/move.png" alt="">
                </div>
            </div>
            <div class="slide t3">
                <div class="move floatMove">
                    <img src="__IMG__/fourth_scene/move.png" alt="">
                </div>
            </div>
            <div class="slide t4">
                <div class="move floatMove">
                    <img src="__IMG__/fourth_scene/move.png" alt="">
                </div>
            </div>
            <div class="slide t5">
                <div class="move floatMove">
                    <img src="__IMG__/fourth_scene/move.png" alt="">
                </div>
            </div>
            <div class="slide t6">
                <div class="move floatMove">
                    <img src="__IMG__/fourth_scene/move.png" alt="">
                </div>
            </div>
        </div>

        <!-- 06 结尾动画 -->
        <div data-anchor='after' class="section after">
            <div class="scene"></div>
            <div class="tool"></div>
            <img src="__IMG__/after/text1.png" alt="" class="text1">
            <img src="__IMG__/after/text2.png" alt="" class="text2">
        </div>

        <!-- 07 成绩单 -->
        <div data-anchor='report' class="section report">
            <img class="title" src="__IMG__/new_after/title.png" alt="">
            <img class="content" src="__IMG__/new_after/content.png" alt="">
        </div>

        <!-- 08 结尾 -->
        <div data-anchor='end' class="section ending">
            <img class="conclude" src="__IMG__/fifth_scene/conclude.png" alt="">
            <img class="code" src="__IMG__/fifth_scene/2.jpg" alt="">
            <img class="text" src="__IMG__/fifth_scene/text.png" alt="">
            <div class="btn">
                <img src="__IMG__/fifth_scene/getMore.png" alt="">
            </div>
        </div>

    </div>

    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/fullpage.min.js"></script>
    <script src="__JS__/layer.js"></script>
    <script src="__JS__/bgMusic.js"></script>
    <script src="__JS__/animate.js"></script>
    <script>
        $(function() {

            var isPhotoWallStart = false;

            // 全屏插件
            $('#wraper').fullpage({
                // 开源项目
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                // 在段落内部不垂直居中
                verticalCentered: false,
                anchors: ['before', 'cover', 'photoWall', 'introduce', 'winner', 'teachers', 'after', 'report', 'end'],
                recordHistory: false,
                onLeave: function(origin, destination, direction) {

                    // 到达有开始按钮的那一屏
                    if (destination.anchor == 'before') {

                        // 延后加载
                        var imgArr = [
                            '__IMG__/fourth_scene/1.jpg',
                            '__IMG__/fourth_scene/2.jpg',
                            '__IMG__/fourth_scene/3.jpg',
                            '__IMG__/fourth_scene/4.jpg',
                            '__IMG__/fourth_scene/5.jpg',
                            '__IMG__/fourth_scene/6.jpg',
                            '__IMG__/fifth_scene/fifth_bg.jpg',
                            '__IMG__/fifth_scene/text.png',
                            '__IMG__/fifth_scene/getMore.png',
                            '__IMG__/fifth_scene/2.jpg',
                            '__IMG__/fifth_scene/close.png',
                            '__IMG__/after/back.jpg',
                            '__IMG__/after/scene.png',
                            '__IMG__/after/text1.png',
                            '__IMG__/after/text2.png'
                        ]
                        afterLoadImg(imgArr);
                    }

                    // 到达有开始按钮的那一屏
                    if (destination.anchor == 'cover') {
                        $('#enter').show().addClass('btndrop');

                        // 延后加载
                        var img = new Image();
                        img.src = "__IMG__/fifth_scene/moreTeachers.jpg";
                    }

                    // 到达图片墙
                    if (destination.anchor == 'photoWall') {
                        // 滚动有700毫秒的动画
                        setTimeout(function() {
                            if (!isPhotoWallStart) {
                                isPhotoWallStart = true;
                                rotateIn();
                            }
                        }, 700);
                    }

                    // 到达底部动画
                    if (destination.anchor == 'after') {
                        $('#wraper .after .tool').show().addClass('toolIn');
                        $('#wraper .after .scene').show().addClass('rfadeIn');
                        $('#wraper .after .text1').css('animation', 'textLeftFadeIn 1s ease-out 4s forwards');
                        $('#wraper .after .text2').css('animation', 'textRightFadeIn 1s ease-out 5s forwards');
                    }

                    // 到达尾页
                    if (destination.anchor == 'end') {
                        // 滚动有700毫秒的动画
                        setTimeout(function() {
                            $('#wraper .ending .code').show().css('animation', 'codedrop 2s ease-out forwards');
                            $('#wraper .ending .text').show().css('animation', 'textup 1.5s ease-out 2s forwards');
                        }, 700);
                    }
                }
            });

            // 首页进入
            $('#enter').on('click', function() {
                $.fn.fullpage.moveTo('photoWall');
            })

            // 尾页弹框
            $('.ending .btn').on('click', function() {

                // 禁止fullpage滚动的 不然长图没法滚动
                $.fn.fullpage.setAllowScrolling(false);

                layer.config({
                    skin: 'endLayer'
                });
                layer.open({
                    type: 1,
                    title: false,
                    area: ['100%', '100%'],
                    offset: 't',
                    anim: 2,
                    content: '<div class="moreTeachers"><img src="__IMG__/fifth_scene/moreTeachers.jpg" /></div>',
                    cancel: function() {
                        $.fn.fullpage.setAllowScrolling(true);
                    }
                });
            });

            function afterLoadImg(srcArr) {
                for (var i = 0; i < srcArr.length; i++) {
                    var oImg = new Image();
                    oImg.src = srcArr[i];
                }
            }

            var loaders = [];
            var imgMap = [
                '__IMG__/first_scene/first.jpg',
                '__IMG__/second_scene/pw1.jpg',
                '__IMG__/second_scene/pw2.jpg',
                '__IMG__/second_scene/pw3.jpg',
                '__IMG__/second_scene/pw4.jpg',
                '__IMG__/second_scene/pw5.jpg',
                '__IMG__/second_scene/pw6.jpg',
                '__IMG__/second_scene/pwbg.jpg',
                '__IMG__/third_scene/introduce.jpg'
            ];
            var img = new Image();
            img.src = "__IMG__/loading.gif";
            img.onload = function() {
                $('#loading').show();
                for (var i = 0; i < imgMap.length; i++) {
                    loaders.push(loadImgs(imgMap[i]));
                }

                var u = navigator.userAgent;
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (!isiOS) {
                    loaders.push(loadAudios('__MUSIC__/bg.mp3'));
                }
                
                $.when.apply($, loaders).done(function() {
                    preLoad();
                });
            }

            // 加载图片
            function loadImgs(src) {
                var deferred = $.Deferred();
                var img = new Image();
                img.src = src;
                img.onload = function() {
                    deferred.resolve();
                };
                return deferred.promise();
            }

            // 加载音频
            function loadAudios(src) {
                var deferred = $.Deferred();
                // 括号的src不能去掉
                var audio = new Audio(src);
                audio.onloadedmetadata = function() {
                    deferred.resolve();
                };
                audio.src = src;
                return deferred.promise();
            }

            function preLoad() {
                $('#loading').hide();
                $('#wraper .before .scene').addClass('zfadeIn');
                $('#wraper .before .shin').addClass('warm');
                $('#wraper .before .tool').addClass('toolIn');
                $('#wraper .before .text').show().addClass('showText');
                setTimeout(function() {
                    $('#wraper .before .arrowDown').animateCss('fadeIn', function() {
                        $('#wraper .before .arrowDown').css({
                            opacity: 1
                        }).addClass(' floatMoveUp');
                    })
                }, 6000)
                // 背景音乐
                var bgMusic = new BgMusic({
                    music: "__MUSIC__/bg.mp3"
                });
            }

        })
    </script>
</body>

</html>